<template>
	<view class="leave-container">
		<view class="header">
			<view class="title">员工请假</view>
			<view class="subtitle">填写请假信息</view>
		</view>
		
		<view class="form-card">
			<view class="form-item">
				<view class="form-label">
					<image src="../../static/imges/calendar-start.png" class="form-icon"></image>
					<text>请假开始时间</text>
				</view>
				<view class="picker-wrapper">
					<uni-datetime-picker 
						v-model="startDatePicker" 
						type="datetime" 
						:start="today" 
						:end="maxDate"
						placeholder="请选择请假开始日期"
						class="custom-picker"
					></uni-datetime-picker>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label">
					<image src="../../static/imges/calendar-end.png" class="form-icon"></image>
					<text>请假结束时间</text>
				</view>
				<view class="picker-wrapper">
					<uni-datetime-picker 
						v-model="endDatePicker" 
						type="datetime" 
						:start="today" 
						:end="maxDate"
						placeholder="请选择假期结束日期"
						class="custom-picker"
					></uni-datetime-picker>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label">
					<image src="../../static/imges/reason.png" class="form-icon"></image>
					<text>请假理由</text>
				</view>
				<view class="textarea-wrapper">
					<textarea 
						v-model="leaveReason" 
						maxlength="200" 
						placeholder="请输入请假理由（最多200字）"
						class="reason-textarea"
					></textarea>
					<view class="word-count">{{leaveReason.length}}/200</view>
				</view>
			</view>
		</view>
		
		<view class="submit-area">
			<button class="submit-btn" @click="submitLeaveApplication">提交申请</button>
			<view class="tips">提交后请等待审批结果</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				startDatePicker: "",
				endDatePicker: "",
				leaveReason: "",
				today: new Date().toISOString().slice(0, 10),
				maxDate: new Date(new Date().getFullYear() + 1, 11, 31).toISOString().slice(0, 10),
			};
		},
		methods: {
			submitLeaveApplication() {
				//TODO: 提交请假申请
				request.post("/studentLeave/submit", {
						reason: this.leaveReason,
						startDate: this.startDatePicker,
						endDate: this.endDatePicker
					})
					.then(res => {
						let data = res.data;
						
						this.startDatePicker = "",
						this.endDatePicker = "",
						this.leaveReason = "",
						uni.showToast({
							title: "请假信息提交成功"
						})
					});
			}
		}
	};
</script>

<style>
	.leave-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 40rpx;
	}
	
	.header {
		background: linear-gradient(to right, #4f99ff, #6ba6ff);
		padding: 40rpx 30rpx 60rpx;
		color: #fff;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(79, 153, 255, 0.2);
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}
	
	.form-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0 30rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-item {
		margin-bottom: 40rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.form-label {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.form-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}
	
	.picker-wrapper {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 4rpx 20rpx;
		border: 1px solid #eaeaea;
	}
	
	.custom-picker {
		width: 100%;
		height: 80rpx;
	}
	
	.textarea-wrapper {
		position: relative;
		border: 1px solid #eaeaea;
		border-radius: 12rpx;
		background-color: #f8f8f8;
		padding: 20rpx;
	}
	
	.reason-textarea {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		line-height: 1.6;
	}
	
	.word-count {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #999;
	}
	
	.submit-area {
		margin: 60rpx 30rpx 0;
	}
	
	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 12rpx;
		background: linear-gradient(to right, #4f99ff, #6ba6ff);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 15rpx rgba(79, 153, 255, 0.2);
		transition: all 0.3s;
	}
	
	.submit-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 8rpx rgba(79, 153, 255, 0.15);
	}
	
	.tips {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>